<template>
  <el-card shadow="never" body-style="padding: 0;">
    <div class="ele-cell demo-monitor-tool">
      <div class="ele-cell-content">
        <el-tabs
          v-model="saleSearch.type"
          class="demo-monitor-tabs"
          @tab-click="onSaleTypeChange"
        >
          <el-tab-pane label="代理数量" name="agencyCount" />
          <el-tab-pane label="商家数量" name="reserveOrder" />
          <el-tab-pane label="总套餐数" name="stationOrder" />
          <el-tab-pane label="总设备数" name="packOrder" />
        </el-tabs>
      </div>
      <div :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]">
        <el-radio-group v-model="saleSearch.dateType" size="small" @change="onSearchTypeChange">
          <el-radio-button :label="7">近一周</el-radio-button>
          <el-radio-button :label="30">近一月</el-radio-button>
        </el-radio-group>
      </div>
      <!--<div
        :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
        style="width: 260px; margin-left: 10px"
      >
        <el-date-picker
          unlink-panels
          type="daterange"
          class="ele-fluid"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          v-model="saleSearch.datetime"
          range-separator="至"
          size="small"
          value-format="yyyy-MM-dd"
        />
      </div>
      <div style="margin-left: 10px">
          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
            class="ele-btn-icon"
            size="small"
          >
            查询
          </el-button>
          <el-button  size="small" @click="reset">重置</el-button>
      </div>-->
    </div>
    <el-divider />
    <el-row>
      <el-col v-bind="styleResponsive ?  ({ lg: 24, md: 16 }) : ({ span: 24 })"  style="margin-top: 30px">
        <div class="demo-monitor-title">
          <!--<span v-if="saleSearch.type === 'agencyCount'">代理趋势</span>
          <span v-else-if="saleSearch.type === 'reserveOrder'">商家趋势</span>
          <span v-else-if="saleSearch.type === 'stationOrder'">套餐趋势</span>
          <span v-else-if="saleSearch.type === 'packOrder'">设备趋势</span>-->
        </div>
        <v-chart
          ref="saleChart"
          style="height: 285px"
          :option="saleChartOption"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>

  import { getDaiLiDate } from '@/api/dashboard/workplace';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart,BarChart,PieChart  } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { echartsMixin } from '@/utils/echarts-mixin';
  use([
    CanvasRenderer,
    LineChart,
    BarChart,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);


  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['saleChart'])],
    data() {
      return {
        // 销售量搜索参数
        saleSearch: {
          type: 'agencyCount',
          dateType: 7,
          datetime: ''
        },
        // 代理趋势数据
        saleroomData1: [],
        // 回收订单趋势数据
        saleroomData2: [],
        // 回收站订单趋势数据
        saleroomData3: [],
        // 打包站订单趋势数据
        saleroomData4: [],
        // 访问量趋势数据
        saleDate: [],
        // 门店排名数据
        saleroomRankData: [ ],
        saleRankData1:[],
        saleRankData2:[],
        saleRankData3:[],
        saleRankData4:[],
        // 销售额柱状图配置
        saleChartOption: {}
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getSaleroomData();
    },
    methods: {
      /* 搜索 */
      search() {
        this.getSaleroomData();
      },
      /*  重置 */
      reset() {
        this.saleSearch.datetime = [];
        this.search();
      },
      onSearchTypeChange(){
        this.saleSearch.datetime = [];
        this.getSaleroomData();
      },
      /* 获取销售量数据 */
      getSaleroomData() {

        let datyType = this.saleSearch.dateType;
        // let datetime = this.saleSearch.datetime;
        // 输入日期选择范围进入（暂无）
        /*if(datetime != ''){
          datyType = 5;
        }*/

        // const [d1, d2] = datetime ?? [];
        console.log('datyType========',datyType)
        getDaiLiDate(datyType)
          .then((data) => {
            console.log('data======',data)
            // oem名称是代理的数据查询 merchant名称商家的数据查询 equipment名称设置的数据查询 merchantType名称套餐类型的数据查询
            // return
            var oem = data.oem.map(item => {
              return item.count
            })
            var merchant = data.merchant.map(item => {
              return item.count
            })
            var merchantType = data.merchantType.map(item => {
              return item.count
            })
            var equipment = data.equipment.map(item => {
              return item.count
            })
            this.saleDate = data.date;
            this.saleroomData1 = oem;
            this.saleroomData2 = merchant;
            this.saleroomData3 = merchantType;
            this.saleroomData4 = equipment;
            this.onSaleTypeChange();
            console.log('this.saleroomData1',this.saleroomData1,'222',this.saleroomData2,'333',this.saleroomData3,'444',this.saleroomData4)
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
        return
        getAdminChartData({
          type:datyType,
          start_time:d1 ? d1 + ' 00:00:00' : '',
          end_time: d2 ? d2 + ' 23:59:59' : ''
        })
          .then((data) => {
            this.saleDate = data.date;
            this.saleroomData1 = data.agency;
            this.saleroomData2 = data.reserve;
            this.saleroomData3 = data.station;
            this.saleroomData4 = data.pack;
            this.onSaleTypeChange();
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },

      /* 销售量tab选择改变事件 暂不使用 */
      onSaleTypeChange() {
        let name = ''   // 折线图 线名称
        let data = [];  // 折线图 count数据集合
        if(this.saleSearch.type === 'agencyCount'){
          data = this.saleroomData1; //代理数量
          name = '代理数量'
        }else if(this.saleSearch.type === 'reserveOrder'){
          data = this.saleroomData2; //商家数量
          name = '商家数量'
        }else if(this.saleSearch.type === 'stationOrder'){
          data = this.saleroomData3; //总套餐数
          name = '总套餐数'
        }else if(this.saleSearch.type === 'packOrder'){
          data = this.saleroomData4; //总设备数
          name = '总设备数'
        }
        // if(this.saleSearch.type === 'agencyCount'){
          this.saleChartOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: [name],
              right: 20
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: this.saleDate
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: name,
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data
                // data: data.count
              }
            ]
          };

        /*}else{
          this.saleChartOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['订单数量', '订单金额'],
              right: 20
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: this.saleDate
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '订单数量',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.count
              },
              {
                name: '订单金额',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.money
              }
            ]
          };
        }*/

      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 销售额、访问量工具栏 */
  .demo-monitor-tool {
    padding: 0 20px;

    .demo-monitor-tabs {
      height: 51px;
    }

    :deep(.el-tabs__item) {
      height: 51px;
      line-height: 51px;
      font-size: 15px;
    }

    :deep(.el-tabs__nav-wrap:after) {
      display: none;
    }
  }

  /* 小标题 */
  .demo-monitor-title {
    padding: 0 20px;
    margin: 15px 0 5px 0;
  }

  /* 排名 item */
  .demo-monitor-rank-item {
    padding: 0 20px;
    line-height: 20px;
    margin-top: 18px;
  }
</style>
